<script>
import { onMounted, onBeforeUnmount, reactive, toRefs, ref } from "vue";

import * as echarts from "echarts";
export default {
  props: {
    //title: { type: String, default: "" }, //标题
    dataListGB: { type: Array, default: [] }, //数据列表
  },
  setup(props) {
    const state = reactive({});

    const echartContainer = ref();
    let myChart = null;

    const resizeHandler = () => {
      myChart.resize();
    };

    //防抖
    const debounce = (func, wait) => {
      let timeout;
      return function () {
        const context = this;
        const args = arguments;
        if (timeout) clearTimeout(timeout);
        timeout = setTimeout(() => {
          func.apply(context, args);
        }, wait);
      };
    };

    const cancalDebounce = debounce(resizeHandler, 500);

    const initChart = () => {
      myChart = echarts.init(echartContainer.value);

      window.addEventListener("resize", cancalDebounce);

      myChart.setOption(option);
    };

    let option = {
       title:{
          text: "北门客流统计",
          top:"1%",
          textStyle:{
              fontSize:12,
 
          },
        },
      tooltip:{
      trigger:'item',
  },
      series: {
        type: "sunburst",
        data:[
     {
     name: '男',
     children: [
      {
        name: '带包',
        value: props.dataListGB[0],
      },
      {
        name:'不带包',
        value: props.dataListGB[1],
         
      },
   ]
  },
  {
    name: '女',
    children: [
      {
        name: '带包',
        value: props.dataListGB[2],
      },
      {
        name: '不带包',
        value: props.dataListGB[3],
      }
    ],
  }
],

        radius: [0, "90%"],
        label: {
          rotate: "radial",
        },
        emphasis: {
        focus: 'ancestor'
        },
      },
    };

    onMounted(() => {
      initChart();
    });

    onBeforeUnmount(() => {
      window.removeEventListener("resize", cancalDebounce);
      myChart.dispose();
    });

    return { ...toRefs(state), echartContainer };
  },
};
</script>

<template>
  <el-card shadow="never" style="width: 100%; height: 100%">
    <template #header> {{ title }}</template>
    <div ref="echartContainer" style="width: 100%; height: 100%"></div>
  </el-card>
</template>
<style scoped>
</style>